<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>File and Text Sharing Service</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f4f4f4;
        }
        form {
            margin-bottom: 30px;
        }
        textarea, input[type="file"] {
            margin-bottom: 10px;
            padding: 8px;
            width: 100%;
        }
        button {
            padding: 10px 15px;
            background-color: #28a745;
            color: white;
            border: none;
            cursor: pointer;
        }
        button:hover {
            background-color: #218838;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            padding: 12px;
            border: 1px solid #ddd;
            text-align: left;
        }
        th {
            background-color: #f8f9fa;
        }
    </style>
</head>
<body>
    <h1>File and Text Sharing Service</h1>

    <form action="/share-text" method="POST">
        <h3>Share Text</h3>
        <textarea name="text" rows="4" placeholder="Enter your text here..." required></textarea>
        <button type="submit">Share Text</button>
    </form>

    <form action="/share-file" method="POST" enctype="multipart/form-data">
        <h3>Share File</h3>
        <input type="file" name="file" required>
        <button type="submit">Upload File</button>
    </form>

    <h2>Upload History</h2>
    <table>
        <thead>
            <tr>
                <th>Type</th>
                <th>File Name</th>
                <th>Content</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            <% uploadsHistory.forEach(function(item) { %>
                <tr>
                    <td><%= item.type %></td>
                    <td><%= item.filename %></td>
                    <td>
                        <% if (item.type === 'text') { %>
                            <pre><%= item.content %></pre>
                        <% } else { %>
                            N/A
                        <% } %>
                    </td>
                    <td><a href="/download/<%= item.filename %>">Download</a></td>
                </tr>
            <% }) %>
        </tbody>
    </table>
</body>
</html>
